<template>
  <div class="groupBuy-container">
    
    <router-view></router-view>
    <div class="groupBuy-foot">
      <div class="group-foot-tab" @click="groupfoottab(0)">
        <img :src="groupindex == 0?'images/group-on.png':'images/group-off.png'" />
        <p :class="{'foot-active':groupindex == 0}">拼购首页</p>
      </div>
      <div class="group-foot-tab" @click="groupfoottab(1)">
        <img :src="groupindex == 1?'images/find-on.png':'images/find-off.png'" />
        <p :class="{'foot-active':groupindex == 1}">找东西</p>
      </div>
      <div class="group-foot-tab" @click="groupfoottab(2)">
        <img :src="groupindex == 2?'images/welfare-on.png':'images/welfare-off.png'" />
        <p :class="{'foot-active':groupindex == 2}">领福利</p>
      </div>
      <div class="group-foot-tab" @click="groupfoottab(3)">
        <img :src="groupindex == 3?'images/myself-on.png':'images/myself-off.png'" />
        <p :class="{'foot-active':groupindex == 3}">我的</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "groupbuy",
  data() {
    return {
      groupindex: 0
    };
  },
  methods: {
    groupfoottab(index) {
      this.groupindex = index;

      if (index == 0) {
        this.$router.push("/groupbuy/zero");
      }

      if (index == 1) {
        this.$router.push("/groupbuy/one");
      }

      if (index == 2) {
        this.$router.push("/groupbuy/two");
      }

      if (index == 3) {
        this.$router.push("/groupbuy/three");
      }
    }
  }
};
</script>

<style scoped>
.groupBuy-container {
  width: 100%;
}

.groupBuy-foot {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #ffffff;
}

.group-foot-tab {
  width: 25%;
  height: 100%;
  text-align: center;
  flex-shrink: 0;
}

.group-foot-tab img {
  width: 20px;
  height: 20px;
}

.group-foot-tab p {
  /* color: #999999; */
  font-size: 12px;
  text-align: center;
}

.foot-active {
  color: #e93b3d;
}
</style>